<script>
import { getSafeAreaInsets } from "../../utils/safeAreaUtil";

export default {
  data() {
    return {
      top: 15,
      sysButHeight: 0,
      checkValue: null,
      sysBottom: 0,
    };
  },
  methods: {
    async init() {
      const { sysTop, sysButHeight, sysBottom } = await getSafeAreaInsets();
      this.top = sysTop;
      this.sysButHeight = sysButHeight;
      this.sysBottom = sysBottom;
    },
  },
  async mounted() {
    this.init();
  },
  props: {
    //展示头部安全区
    showHead: {
      default: true,
      typeof: [Boolean],
    },
    //展示头部标题
    showTitle: {
      default: true,
      typeof: [Boolean],
    },
    //底部安全区
    showBottom: {
      default: true,
      typeof: [Boolean],
    },
    //是否展示TabBar
    showTabBar: {
      default: false,
      typeof: [Boolean],
    },
    //设置头部颜色
    color: {
      default: "",
      typeof: [String],
    },
    //设置头部标题高度
    titleHeight: {
      default: "0",
      typeof: [String, Number],
    },
    //设置头部安全区颜色
    headSafColor: {
      default: "",
      typeof: [String],
    },
    // 设置底部安全区颜色
    bottomSafColor: {
      default: "transparent",
      typeof: [String],
    },
    allColor: {
      default: "#fff",
      //allColor:#ecf4f4
      typeof: [String],
    },
  },
};
</script>
<template>
  <view class="layout" :style="{ backgroundColor: allColor }">
    <view :style="{ background: color }">
      <!-- 安全区 -->
      <view v-if="showHead" :style="{ height: top + 'px', background: headSafColor }" class="header-saf"></view>
      <!-- 头部按钮 -->
      <view v-if="showTitle" :style="{ height: sysButHeight ? sysButHeight + 'px' : 'auto' }" class="header-button">
        <slot name="title"></slot>
      </view>
      <view :style="{ height: titleHeight + 'rpx' }"></view>
    </view>
    <view class="content">
      <slot name="default"></slot>
    </view>
    <view v-if="showBottom && !showTabBar" :style="{ height: sysBottom + 'px', background: bottomSafColor }"></view>
    <TabBar v-if="showTabBar"></TabBar>
  </view>
</template>

<style lang="scss" scoped>
.group {
  display: flex;
  align-items: start;
  margin-top: 10rpx;
}

.color_b {
  color: black;
}

.service {
  width: 100%;
  font-size: 25rpx;
  color: rgba(0, 0, 0, 0.4);
}

.layout {
  height: 100vh !important;
  width: 750rpx;
  display: flex;
  flex-direction: column;
  background-color: #ecf4f4;

  .header-button {
    width: 100%;
    display: flex;
    align-items: center;
    height: auto;
  }

  .header-saf {
    height: auto;
    width: 100%;
  }

  .content {
    flex: 1;
    width: 100%;
    overflow-y: hidden;
  }
}
</style>
